import {createApp} from 'vue';
import Antd from 'ant-design-vue';
import '@/assets/style.css';
import App from './App.vue';
import {router} from './router';
import 'ant-design-vue/dist/reset.css';
import {pinia} from "./store";
import * as antIcons from '@ant-design/icons-vue';
import lodash from 'lodash';
import {highlightDirective} from "@/directives/highlight";
import VueLazyLoad from 'vue-lazyload';
import LoadingGif from '@/assets/loading/loading.gif';
import XSS from 'xss';
import { Fancybox } from "@fancyapps/ui";
import {zh_CN} from "@fancyapps/ui/l10n/Fancybox/zh_CN"
import "@fancyapps/ui/dist/fancybox/fancybox.css";
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css';

const app = createApp(App);
app.use(router)
app.use(Antd)
app.use(pinia)
app.use(mavonEditor)
app.use(VueLazyLoad, {
    preLoad: 1.3,
    error: LoadingGif, // 加载失败时显示的图片
    loading: LoadingGif, // 加载中的占位图
    attempt: 1 // 尝试加载次数
});

// 注册Vite图标组件
Object.keys(antIcons).forEach((key) => {
    //@ts-ignore
    app.component(key, antIcons[key]);
});
// 定义全局的 XSS 解决方法
app.config.globalProperties.$xss = (dirtyHtml: any, options: any) => {
    return XSS(dirtyHtml, options);
};
//全局挂载
app.config.globalProperties.$antIcons = antIcons;
app.config.globalProperties.$lodash = lodash;
app.config.globalProperties.$fancybox = Fancybox;
// 注册自定义指令
app.directive('highlight', highlightDirective);

app.mount('#app')

// Fancybox初始化设置
Fancybox.defaults = {
    ...Fancybox.defaults,
    l10n: zh_CN,
    hideScrollbar: false,
    Images: {
        initialSize: "fit",
        zoom: false,
    },
};
Fancybox.bind('[data-fancybox]', {
    ...Fancybox.defaults,
    autoFocus: false,
    dragToClose: false,
    tpl:{
        closeButton: '<button data-fancybox-close class="button close icon-bottom has-vite-color has-btn-effect" title="关闭"><span class="btn-meta">关闭</span></button>',
    }
})
// @ts-ignore
Fancybox.bind('[data-fancybox="div"]', {
    ...Fancybox.defaults,
    defaultType: 'html',
    defaultDisplay: "block",
    mainClass: "fancybox-div",
    closeExisting: true,
    autoFocus: false,
    groupAttr: false,
    dragToClose: false,
    tpl:{
        closeButton: '<button data-fancybox-close class="button close icon-bottom has-vite-color has-btn-effect" title="关闭"><span class="btn-meta">关闭</span></button>',
    }
})
Fancybox.bind('[data-fancybox="tip"]', {
    ...Fancybox.defaults,
    mainClass: "fancybox-tip",
    Toolbar: false,
    width: 400,
});
// @ts-ignore
Fancybox.bind('[data-fancybox="gallery"]', {
    ...Fancybox.defaults,
    Carousel: {
        transition: 'classic',
    },
    Thumbs: {
        type: 'classic',
    },
    Toolbar: {
        display: {
            absolute: true,
            left: ['slideshow','infobar'],
            middle: ['toggle1to1','rotateCW','flipX','flipY','fullscreen'],
            right: ['thumbs','close'],
        }
    }
});
